import React, { Component } from 'react'
import { Link, useLocation } from 'react-router-dom'

import './leftNav.less'
import logo from '../../assets/login/logo.png'
import menuList from '../../config/menuConfig'


import { Menu } from 'antd';
import memoryUtils from '../../utils/memoryUtils'
const { SubMenu } = Menu;

//定义一个函数，目的是获取loaction，因为v6不能使用v5版本的this.props，同样也移除了v5版本的withRouter
function myWithRouter (MessCom) {
  return (props) => {
    let location = useLocation();
    return <MessCom {...props} location={location} />
  }
}

class LeftNav extends Component {
  state = {
    menuNodes: null
  }

  //判断当前登录用户对item是否有权限
  hasAuth = (item) => {
    const { key, isPublic } = item
    const menus = memoryUtils.user.role.menus
    const username = memoryUtils.user.username
    /*
   1. 如果当前用户是admin
   2. 如果当前item是公开的
   3. 当前用户有此item的权限: key有没有menus中
    */
    if (username === 'admin' || isPublic || menus.indexOf(key) !== -1) {
      return true
    } else if (item.children) {
      return !!item.children.find(child => menus.indexOf(child.key) !== -1)
    }
    return false
  }

  /*
   在第一次render()之前执行一次
   为第一个render()准备数据(必须同步的)
    */
  // UNSAFE_componentWillMount () {
  //   this.menuNodes = this.getMenuNodes(menuList)
  // }
  // static getDerivedStateFromProps (props, state) {
  //   console.log('getDerivedStateFromProps', props, state);
  //   //state.menuNodes = this.getMenuNodes(menuList)
  // }

  // 第一种方法，使用map与递归
  // getMenuNodes = (menuList) => {
  //   return menuList.map(item => {
  //     if (!item.children) {
  //       return (
  //         <Menu.Item key={item.key} icon={item.icon}>
  //           <Link to={item.key}>{item.title}</Link>
  //         </Menu.Item>
  //       )
  //     } else {
  //       return (
  //         <SubMenu key={item.key} icon={item.icon} title={item.title}>
  //           {
  //             this.getMenuNodes(item.children)
  //           }
  //         </SubMenu>
  //       )
  //     }
  //   })
  // }

  //第二种方法，使用reduce和递归
  getMenuNodes = (menuList) => {
    //获取当前路径的path
    const path = this.props.location.pathname
    return menuList.reduce((pre, item) => {
      // 如果当前用户有item对应的权限, 才需要显示对应的菜单项
      if (this.hasAuth(item)) {
        if (!item.children) {
          pre.push((
            <Menu.Item key={item.key} icon={item.icon}>
              <Link to={item.key}>{item.title}</Link>
            </Menu.Item>
          ))
        } else {
          //查找一个与当前请求路径匹配的子item
          const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
          //如果存在，说明当前item的子列表需要打开
          if (cItem) {
            this.openKey = item.key
          }
          pre.push((
            <SubMenu key={item.key} icon={item.icon} title={item.title}>
              {
                this.getMenuNodes(item.children)
              }
            </SubMenu>
          ))
        }

      }
      return pre
    }, [])
  }

  render () {
    this.menuNodes = this.getMenuNodes(menuList)
    //获取当前路径的path
    let path = this.props.location.pathname
    if (path.indexOf('/product') === 0) {
      path = '/product'
    }
    //得到需要打开的菜单项的key
    const openKey = this.openKey
    return (
      <div className="left-nav">
        <Link to="/home" className="left-nav-header">
          <img src={logo} alt="" />
          <h1>后台管理</h1>
        </Link>
        <Menu
          selectedKeys={[path]}
          defaultOpenKeys={[openKey]}
          mode="inline"
          theme="dark"
        >
          {
            this.menuNodes
          }
          {/* <Menu.Item key="/home" icon={<PieChartOutlined />}>
            <Link to="/home">首页</Link>
          </Menu.Item>
          <SubMenu key="sub1" icon={<MailOutlined />} title="商品">
            <Menu.Item key="/category" icon={<MailOutlined />} >
              <Link to="/category">品类管理</Link>
            </Menu.Item>
            <Menu.Item key="/product" icon={<MailOutlined />} >
              <Link to="/product">商品管理</Link>
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="/user" icon={<DesktopOutlined />}>
            <Link to="/user">用户管理</Link>
          </Menu.Item>
          <Menu.Item key="/role" icon={<ContainerOutlined />}>
            <Link to="/role">角色管理</Link>
          </Menu.Item>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="图形图表">
            <Menu.Item key="/bar" icon={<AppstoreOutlined />}>
              <Link to="/bar">柱状图</Link>
            </Menu.Item>
            <Menu.Item key="/line" icon={<AppstoreOutlined />}>
              <Link to="/line">折线图</Link></Menu.Item>
            <Menu.Item key="/pie" icon={<AppstoreOutlined />}>
              <Link to="/pie">饼图</Link>
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="/order" icon={<DesktopOutlined />}>
            <Link to="/order">订单管理</Link>
          </Menu.Item> */}
        </Menu>
      </div>
    )
  }
}

export default myWithRouter(LeftNav)